<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button
            type="primary"
            size="small"
            @click="addPermissionFn(1, '0')"
          >添加权限</el-button>
        </div>
        <!-- row-key指定对象里属性(不重复唯一的, 作为每个节点的标识类似v-for中key) -->
        <el-table border :data="permissionList" row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                v-if="scope.row.pid === '0'"
                type="text"
                @click="addPermissionFn(2, scope.row.id)"
              >添加</el-button>
              <el-button
                type="text"
                @click="edit(scope.row.id)"
              >编辑</el-button>
              <el-button type="text" @click="delFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 新增-权限点-弹窗 -->
      <per-dialog
        ref="perDialog"
        :show-dialog.sync="showPerDialog"
        :click-id="clickId"
        :is-edit="isEdit"
        :origin-list="perList"
        @confirmEV="confirmFn"
      />
    </div>
  </div>
</template>

<script>
import {
  getPermissionListAPI,
  addPermissionAPI,
  getPermissionDetailAPI,
  updatePermissionAPI,
  delPermissionAPI
} from '@/api'
import { transTree } from '@/utils'
import PerDialog from './component/perDialog.vue'
export default {
  components: {
    PerDialog
  },
  data() {
    return {
      permissionList: [], // 权限点列表(树形结构)
      perList: [], // 权限点列表(扁平结构)
      showPerDialog: false, // 控制新增-权限点-弹窗是否出现
      type: 0, // 添加页面权限/按钮权限(1/2)
      pid: '', // 新增权限点对象的pid值使用
      isEdit: false, // 同一个确定按钮前提下, 区分是新增/编辑(false/true)
      clickId: '' // 点击那项(行)数据对象的id
    }
  },
  created() {
    // 请求权限列表数据
    this.getPermissionListFn()
  },
  methods: {
    // 获取-权限列表数据
    async getPermissionListFn() {
      const res = await getPermissionListAPI()
      console.log(res)
      this.perList = res.data
      this.permissionList = transTree(res.data, '0')
    },
    // 添加权限-按钮点击事件-方法
    addPermissionFn(type, pid) {
      this.isEdit = false
      this.showPerDialog = true

      // 保存到组件的属性变量上, 为了一会儿在别的函数使用这2个值
      this.type = type
      this.pid = pid
      // pid: '0' / 点击那行的id值
      // 添加一级 / 二级
      this.clickId = pid
    },
    // 添加权限->接口调用(弹框点确定了)
    // 名字(变量名){} -> 函数定义创建 (值就是调用处传递过来的值) ->被动"接收"
    // 名字(变量名) -> 调用传入值 -> 主动调用别人"传入"值
    async confirmFn(dataObj) {
      if (this.isEdit) {
        // 编辑状态-> dataObj里已经有了type和pid了
        const res = await updatePermissionAPI(dataObj)
        console.log(res)
      } else {
        // 新增
        /**
       * {
        ...dataObj,
        type: this.type,
        pid: this.pid
      }
       */
        dataObj.type = this.type
        dataObj.pid = this.pid
        const res = await addPermissionAPI(dataObj)
        console.log(res)
      }

      // 请求权限列表数据
      this.getPermissionListFn()
    },
    // 编辑权限点->点击事件
    async edit(id) {
      this.isEdit = true
      this.clickId = id
      this.showPerDialog = true
      // 请求详细信息
      const res = await getPermissionDetailAPI(id)
      console.log(res)
      // 你也可以用父-子(props方式), 子里watch侦听props变量还得转发赋予给data里属性
      this.$refs.perDialog.formData = res.data // 已经有type和pid字段和值
      console.log(this.$refs.perDialog) // perDialog.vue里this的值
      // 右边this.formData 所以前面this换成上面3个单词就好了
      // 右边想要获取el-form组件的话
      // 右边this.$refs.perForm.resetFields()
      // this.$refs.perDialog.$refs.perForm.resetFields()
    },
    // 删除权限点->点击事件
    async delFn(id) {
      await delPermissionAPI(id)
      this.getPermissionListFn()
    }
  }
}
// 只有在export default {}这个配置对象里定义的属性和方法, 才需要this.调用
// script标签import const var 声明的变量 / 函数形参变量名 都是直接使用, 不要this.
// 标签上省略this.来访问vue体系内的变量

// 代码写的少, 不熟练.
// 过年放半个月假, 一行代码(电脑都不开) -> 明天最后一节课我会给你们布置作业 (3天做个小练习-10-30分钟)
// 回来我们要马上开启项目实战6个人一组(沉浸式体验, 完全模拟企业里开发的环境, 我是team leader, 我不讲代码)
// 给你个思路. 你自己解决.
// 行->通关, 不行->考虑重学 -> 项目实战5天(最后一天下午 答辩. 每日晚上开会. 分享你做的事情. 我记录)

// this指向:
// 前提: 知道: 我们写的template里标签和export default {}里的js, 都是模板/配置项代码->并非运行时直接使用
// 运行: template => 虚拟DOM(保存标签节点关键信息的js对象) => 真实DOM结构 => 网页指定标签位置里
// 运行: js => export default {}, 里面都是配置项代码,  methods里/data里/computed里/...
// 导入到vue源码中, 给当前Vue文件对应这个组件对象(this值), 添加data函数执行后, 里面的属性和初始值
// 用this访问的是当前组件内相关的属性和值

// $refs是vue给this身上添加的内置属性(一般内置的属性都以$开头-内置API接口属性/方法, 为了和你定义的属性区分开)
// 语法: this.$refs.ref名字 -> 获取"原生标签"/目标"组件对象"(此vue文件里this的值)
// 例如:
// <p ref="myP">我是p标签</p>
// <per-dialog ref="perDialog"></per-dialog>
// this.$refs.myP -> 原地的值 原生p标签对象 -> key+value值
// this.$refs.perDialog -> 原地的值 perDialog组件对象(vue文件内this值) -> key+value值

// 重点: 获取标签的时候, 拿到的组件对象就是vue文件里this
</script>

<style lang="scss" scoped></style>
